<template>
<router-link  :to="`/ShoppingCart?id=${phone.prod_id}`">
  <ul class="box_shadow">
    <li>
      <img :src="phone.prod_pic">
    </li>
    <li><h3 style="color: #749594;font-size: 16px;height: 22px ">{{phone.prod_title}}</h3></li>
    <li><p>{{phone.prod_desc}}</p></li>
    <li><span style="color: #FF6700; font-size: 15px">{{phone.prod_price_current}} &nbsp;元起</span></li>
  </ul>
</router-link>

</template>

<script>

export default {
  name: "listR",
  props:['phone'],
  data() {
    return {
    }
  }
}
</script>

<style scoped>
a {
  display: block;
  background-color: rgba(0,0,0,0);
  float: left;
  width: 234px;
  height: 300px;
  margin-left:13px ;
  margin-bottom: 15px;
}
a ul li img{
  width: 160px;
  height: 160px;
}
a ul li {
  list-style: none;
}
p, h3 {
  width: 160px;
  text-align: center;
}
span {
  display: block;
  width: 160px;
  text-align: center;
}
 .box_shadow {
  transition: all 0.1s;
}

 .box_shadow:hover {
   box-shadow:  0px 0px 25px #a09999;
  border: 2px solid #b0b0b0;
  color: #c1bbbb;
  border-radius: 2px;
}
</style>